@charset "UTF-8";
/*==================================================
main --- page
==================================================*/
@media (min-width:1101px) and (max-width:9999px) {
    #header .headerbg.bgcolor {
        background: none;
    }
}
@media screen and (max-width: 1100px) {
    #header .logo .pc {
        display: none;
    }
    #header .logo .sp {
        display: inline-block;
    }
}
/* pagenav
--------------------------------------------- */
#pagenav {
    position: fixed;
    top: 0;
    left: 0;
    width: 380px;
    height: 100%;
    background: #2e2e2e;
}
#pagenav .pagenav {
    padding: 115px 6% 0 11%;
}
#pagenav .pagenav > li {
    padding: 0 0 40px;
}
#pagenav .pagenav a {
    color: #818181;
    opacity: 0;
    transition: all .3s;
}
#pagenav .pagenav a.init {
    opacity: 1;
}
#pagenav .pagenav li > a:hover,
#pagenav .pagenav li.page_current > a {
    color: #fff;
}
#pagenav .pagenav .subnav {
    padding-left: 10px;
}
#pagenav .pagenav .subnav li {
    padding-top: 12px;
}
#pagenav .pagenav .subnav li a:hover,
#pagenav .pagenav .subnav li.current a {
    color: #ffffc0;
}
.app #pagenav {
    background: #fff;
}
.app #pagenav .pagenav li > a:hover,
.app #pagenav .pagenav li.page_current > a {
    color: #333;
}
.app #pagenav .pagenav .subnav li a:hover,
.app #pagenav .pagenav .subnav li.current a {
    color: #2631ff;
}
@media screen and (max-width: 1480px) {
    #pagenav {
        width: 27%;
    }
}
@media screen and (max-width: 1100px) {
    #pagenav {
        display: none;
    }
}
/*==================================================
main --- common
==================================================*/
#main {
    overflow: hidden;
    position: relative;
    margin-left: 380px;
}
.sec:nth-of-type(2n) {
    background: #181818;
}
.page_header .inner,
.page_footer .inner,
.sec .inner {
    position: relative;
    width: 720px;
    margin: 0 auto;
}
.main .number {
    color: #1e1e1e;
    font-size: 80px;
    font-weight: 700;
    line-height: 80%;
    margin: 0 0 20px -15px;
    position: relative;
    display:inline-block;
    overflow:hidden;
	opacity: 0;
}
.main .number .shuffleinner{
  display:inline-block;
  width:1000%;
}
.sec.init .number {
    opacity: 1;
}
.sec:nth-of-type(2n+1) .number {
    color: #121212;
}
.main h2 {
    color: #fff;
}
.main img {
    width: 100%;
}
.sec .cont + .cont {
    padding: 80px 0 0;
}
.app .main .number {
    color: #9e9d9d;
    margin-top: 0;
}
.app .sec:nth-of-type(2n+1) .number {
    color: #e8e8e8;
}
@media (min-width:1101px) and (max-width:9999px) {
    .main .number {
        position: absolute;
        right: 100%;
        margin: -34px 20px 0 0;
    }
    .main .sec.init .number {
        opacity: 1;
    }
}
@media screen and (max-width: 1480px) {
    #main {
        margin-left: 27%;
    }
    .page_header .inner,
    .page_footer .inner,
    .sec .inner {
        width: 70.9%;
    }
}
@media screen and (max-width: 1100px) {
    #main {
        margin-left: 0;
    }
}
@media screen and (max-width: 750px) {
    .page_header .inner,
    .page_footer .inner,
    .sec .inner {
        width: 76.5%;
        margin: 0 0 0 14%;
    }
    .main .number {
        font-size: 12.5vw;
        margin: 0;
        padding: 0 0 3.5%;
    }
    .sec .cont + .cont {
        padding: 17% 0 0;
    }
}
/* ttl_wrap */
.main .ttl_wrap {
    padding: 0 0 34px;
    position: relative;
	opacity: 0;
}
.sec.init .ttl_wrap {
	opacity: 1;
}
.main .ttl_wrap .name {
    font-size: 10px;
    display:inline-block;
    overflow:hidden;
    width:100%;
}
.main .ttl_wrap .name .shuffleinner{
  display:inline-block;
  width:1000%;
}
.main .ttl_wrap h2 {
    font-size: 30px;
    display:inline-block;
    overflow:hidden;
}
.main .ttl_wrap h2 .shuffleinner{
  display:inline-block;
  width:1000%;
}
/*AP*/
.main .ttl_wrap h2 span.small {
    display: block;
    font-size: 12px;
    letter-spacing: 0.15em;
    padding: 5px 0 16px;
}
.main .ttl_wrap .txt {
    font-size: 16px;
    font-weight: 700;
    display:inline-block;
    box-sizing:border-box;
    overflow:hidden;
    width:100%;
}
.main .ttl_wrap .txt .shuffleinner{
  display:inline-block;
  width:1000%;
}
.main h3 {
    color: #757575;
    font-size: 17px;
    font-weight: 700;
    border-bottom: 1px solid #757575;
    padding: 0 0 10px;
    margin: 0 0 30px;
    line-height: 180%;
    position: relative;
	opacity: 0;
  display:inline-block;
  overflow:hidden;
  width:100%;
  box-sizing:border-box;
}
.main h3 .shuffleinner{
  display:inline-block;
  width:1000%;
}
.cont.init h3 {
    opacity: 1;
}
.main h3 .en {
    font-size: 18px;
}
.main h3 .jp {
    font-size: 14px;
    font-weight: 400;
    padding-left: 15px;
}
.main .readtxt {
    color: #757575;
    font-size: 15px;
    font-weight: 700;
    display:inline-block;
    box-sizing: border-box;
}
.main figure figcaption {
    color: #757575;
    font-size: 12px;
    padding: 10px 0 0;
    letter-spacing: 0.1em;
}
.main figure figcaption.en {
    font-size: 13px;
}
.app .main .ttl_wrap h2 {
    color: #333;
    font-weight: 700;
}
.app .main h3 {
    color: #333;
}
.app .main .readtxt {
    color: #fff;
}
@media screen and (max-width: 750px) {
    .main .ttl_wrap {
        padding: 0 0 10%;
    }
    .main .ttl_wrap .name {
        font-size: 2.5vw;
    }
    .main .ttl_wrap h2 {
        font-size: 5.625vw;
    }
    .main .ttl_wrap .txt {
        font-size: 3.125vw;
    }
    .main h3 {
        font-size: 3.125vw;
        padding: 0 0 4%;
        margin: 0 0 9%;
    }
    .main h3 .en {
        display: block;
        font-size: 3.9vw;
    }
    .main h3 .jp {
        display: block;
        font-size: 3.125vw;
        line-height: 120%;
        padding: 2% 0 0;
    }
    .main figure figcaption {
        font-size: 2.5vw;
        padding: 3% 0 0;
    }
    .main .readtxt {
        font-size: 3.4vw;
    }
    .app .main .readtxt {
        font-size: 3.75vw;
    }
}
/* page_footer */
.page_footer .btn_more {
    width: 226px;
    margin: 0 0 105px;
}
.page_footer .btn_more p {
    color: #fff;
}
.page_footer .btn_back {
    position: relative;
    display: block;
    width: 100%;
    background: #ca371c;
    text-align: center;
    padding: 110px 0;
}
.page_footer .btn_back p {
    display: inline-block;
    padding-right: 64px;
    font-size: 10px;
}
.page_footer .btn_back .icn {
    position: absolute;
    top: 50%;
    right: 50%;
    margin-right: -100px;
    display: block;
    background: #a02c16 url(../images/icn_back.svg) no-repeat 50% 50%;
    background-size: 10px auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    transition: all .5s;
}
.page_footer .btn_back:hover .icn {
    -webkit-transform: translate(-50%,-50%) rotate(360deg);
    -ms-transform: translate(-50%,-50%) rotate(360deg);
    transform: translate(-50%,-50%) rotate(360deg);
}
@media screen and (max-width: 750px) {
    .page_footer .btn_more {
        width: 100%;
        margin: 0 0 16%;
    }
    .page_footer .btn_back {
        padding: 20% 0;
    }
    .page_footer .btn_back p {
        font-size: 2.8vw;
        padding-right: 16%;
    }
    .page_footer .btn_back .icn {
        margin-right: -27.7%;
        background-size: 30% auto;
        width: 12.5%;
        height: auto;
        padding: 12.5% 0 0;
    }
}
/* sidenav */
#sidenav {
    margin-left: 380px;
}
.app #sidenav a span::after {
    background: #2631ff;
}
@media screen and (max-width: 1480px) {
    #sidenav {
        margin-left: 27%;
    }
}
@media screen and (max-width: 1100px) {
    #sidenav {
        margin-left: 0;
    }
}
@media screen and (max-width: 750px) {
    #sidenav {
        margin-left: 2%;
    }
}
/* sidelink */
.app #sidelink .sns .facebook .icn {
    background: url(../images/icn_facebook_wt.svg) no-repeat 50% 50%;
    background-size: auto 100%;
}
.app #sidelink .sns .twitter .icn {
    background: url(../images/icn_twitter_wt.svg) no-repeat 50% 50%;
    background-size: auto 100%;
}
.app #sidelink .sns .line .icn {
    background: url(../images/icn_line_wt.svg) no-repeat 50% 50%;
    background-size: auto 100%;
}
/* slider
--------------------------------------------- */
.swiper-container .swiper-slide {
	position: relative;
	opacity: 0;
	left: 40px;
}
.swiper-container.init .slide-item01 {
	opacity: 1;
	left: 0px;
	-webkit-transition: opacity 1s ease 0s,left 1s ease 0s;
	-moz-transition: opacity 1s ease 0s,left 1s ease 0s;
	-o-transition: opacity 1s ease 0s,left 1s ease 0s;
	-ms-transition: opacity 1s ease 0s,left 1s ease 0s;
	transition: opacity 1s ease 0s,left 1s ease 0s;
}
.swiper-container.init .slide-item02 {
	opacity: 1;
	left: 0px;
	-webkit-transition: opacity 1s ease 0.2s,left 1s ease 0.2s;
	-moz-transition: opacity 1s ease 0.2s,left 1s ease 0.2s;
	-o-transition: opacity 1s ease 0.2s,left 1s ease 0.2s;
	-ms-transition: opacity 1s ease 0.2s,left 1s ease 0.2s;
	transition: opacity 1s ease 0.2s,left 1s ease 0.2s;
}
.swiper-container.init .slide-item03 {
	opacity: 1;
	left: 0px;
	-webkit-transition: opacity 1s ease 0.4s,left 1s ease 0.4s;
	-moz-transition: opacity 1s ease 0.4s,left 1s ease 0.4s;
	-o-transition: opacity 1s ease 0.4s,left 1s ease 0.4s;
	-ms-transition: opacity 1s ease 0.4s,left 1s ease 0.4s;
	transition: opacity 1s ease 0.4s,left 1s ease 0.4s;
}
.swiper-container.init .slide-item04 {
	opacity: 1;
	left: 0px;
	-webkit-transition: opacity 1s ease 0.6s,left 1s ease 0.6s;
	-moz-transition: opacity 1s ease 0.6s,left 1s ease 0.6s;
	-o-transition: opacity 1s ease 0.6s,left 1s ease 0.6s;
	-ms-transition: opacity 1s ease 0.6s,left 1s ease 0.6s;
	transition: opacity 1s ease 0.6s,left 1s ease 0.6s;
}
.swiper-container.init .slide-item05 {
	opacity: 1;
	left: 0px;
	-webkit-transition: opacity 1s ease 0.8s,left 1s ease 0.8s;
	-moz-transition: opacity 1s ease 0.8s,left 1s ease 0.8s;
	-o-transition: opacity 1s ease 0.8s,left 1s ease 0.8s;
	-ms-transition: opacity 1s ease 0.8s,left 1s ease 0.8s;
	transition: opacity 1s ease 0.8s,left 1s ease 0.8s;
}
.swiper-container.init .slide-item06 {
	opacity: 1;
	left: 0px;
	-webkit-transition: opacity 1s ease 1.0s,left 1s ease 1.0s;
	-moz-transition: opacity 1s ease 1.0s,left 1s ease 1.0s;
	-o-transition: opacity 1s ease 1.0s,left 1s ease 1.0s;
	-ms-transition: opacity 1s ease 1.0s,left 1s ease 1.0s;
	transition: opacity 1s ease 1.0s,left 1s ease 1.0s;
}
.swiper-container.init .slide-item07 {
	opacity: 1;
	left: 0px;
	-webkit-transition: opacity 1s ease 1.2s,left 1s ease 1.2s;
	-moz-transition: opacity 1s ease 1.2s,left 1s ease 1.2s;
	-o-transition: opacity 1s ease 1.2s,left 1s ease 1.2s;
	-ms-transition: opacity 1s ease 1.2s,left 1s ease 1.2s;
	transition: opacity 1s ease 1.2s,left 1s ease 1.2s;
}
.swiper-container.init .slide-item08 {
	opacity: 1;
	left: 0px;
	-webkit-transition: opacity 1s ease 1.4s,left 1s ease 1.4s;
	-moz-transition: opacity 1s ease 1.4s,left 1s ease 1.4s;
	-o-transition: opacity 1s ease 1.4s,left 1s ease 1.4s;
	-ms-transition: opacity 1s ease 1.4s,left 1s ease 1.4s;
	transition: opacity 1s ease 1.4s,left 1s ease 1.4s;
}
.swiper-container.init .slide-item09 {
	opacity: 1;
	left: 0px;
	-webkit-transition: opacity 1s ease 1.6s,left 1s ease 1.6s;
	-moz-transition: opacity 1s ease 1.6s,left 1s ease 1.6s;
	-o-transition: opacity 1s ease 1.6s,left 1s ease 1.6s;
	-ms-transition: opacity 1s ease 1.6s,left 1s ease 1.6s;
	transition: opacity 1s ease 1.6s,left 1s ease 1.6s;
}
.swiper-container.init .slide-item10 {
	opacity: 1;
	left: 0px;
	-webkit-transition: opacity 1s ease 1.8s,left 1s ease 1.8s;
	-moz-transition: opacity 1s ease 1.8s,left 1s ease 1.8s;
	-o-transition: opacity 1s ease 1.8s,left 1s ease 1.8s;
	-ms-transition: opacity 1s ease 1.8s,left 1s ease 1.8s;
	transition: opacity 1s ease 1.8s,left 1s ease 1.8s;
}
.swiper-container.init .slide-item11 {
	opacity: 1;
	left: 0px;
	-webkit-transition: opacity 1s ease 2s,left 1s ease 2s;
	-moz-transition: opacity 1s ease 2s,left 1s ease 2s;
	-o-transition: opacity 1s ease 2s,left 1s ease 2s;
	-ms-transition: opacity 1s ease 2s,left 1s ease 2s;
	transition: opacity 1s ease 2s,left 1s ease 2s;
}
.swiper-container.init .slide-item12 {
	opacity: 1;
	left: 0px;
	-webkit-transition: opacity 1s ease 2.2s,left 1s ease 2.2s;
	-moz-transition: opacity 1s ease 2.2s,left 1s ease 2.2s;
	-o-transition: opacity 1s ease 2.2s,left 1s ease 2.2s;
	-ms-transition: opacity 1s ease 2.2s,left 1s ease 2.2s;
	transition: opacity 1s ease 2.2s,left 1s ease 2.2s;
}
/* cont_story / cont_app
--------------------------------------------- */
/*AP*/
.cont_story .ttl,
.cont_app .ttl {
  opacity: 0;
  display:inline-block;
  overflow:hidden;
}
.cont_story .ttl .shuffle,
.cont_app .ttl .shuffle{
  display:inline-block;
  width:100%;
  overflow:hidden;
}
.cont_story .ttl .shuffleinner,
.cont_app .ttl .shuffleinner{
  display:inline-block;
  width:1000%;
}
.cont_story.init .ttl,
.cont_app.init .ttl {
    opacity: 1;
}
.cont_story .readtxt,
.cont_app .readtxt{
  opacity: 0;
  box-sizing:border-box;
  display:inline-block;
}
.cont_story .readtxt.sp {
    display: none;
}
.cont_story .readtxt .shuffle,
.cont_app .readtxt .shuffle{
display:inline-block;
width:100%;
overflow:hidden;
}
.cont_story .readtxt .shuffle .shuffleinner,
.cont_app .readtxt .shuffle .shuffleinner{
display:inline-block;
width:1000%;
}
.cont_story .txt01,
.cont_app .txt01 {
    position: relative;
	opacity: 0;
}
.cont_story.init .txt01,
.cont_app.init .txt01 {
    opacity: 1;
	left: 0px;
}
/* bg_txt */
.cont_story .bg_txt,
.cont_app .bg_txt {
    position: absolute;
    top: 0;
    right: 100%;
    margin-right: 30px;
    color: #1e1e1e;
    font-size: 12px;
    font-weight: 700;
    line-height: 140%;
    white-space: nowrap;
    display: inline-block;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
}
.cont_app .bg_txt {
    color: #9e9d9d;
}
.cont_story .bg_txt span,
.cont_app .bg_txt span {
    display: block;
    font-size: 30px;
    line-height: 100%;
}
@media (min-width:751px) and (max-width:9999px) {
    .cont_story .txt01,
    .cont_app .txt01 {
        width: 87%;
    }
}
@media screen and (max-width:1480px) {
    .cont_story .bg_txt,
    .cont_app .bg_txt {
        margin-right: 3%;
    }
}
@media screen and (max-width:750px) {
    .cont_story .readtxt.pc {
        display: none;
    }
    .cont_story .readtxt.sp {
        display: inline-block;
    }
    .cont_story .bg_txt,
    .cont_app .bg_txt {
        margin-right: 0.5%;
        font-size: 1.875vw;
        line-height: 120%;
    }
    .cont_story .bg_txt span,
    .cont_app .bg_txt span {
        font-size: 4.6875vw;
    }
}
/* cont_story
--------------------------------------------- */
.cont_story {
    background: #181818;
}
.cont_story .ttl {
    font-size: 93px;
    line-height: 90%;
}
.cont_story .movie {
    position: relative;
    width: calc(50% + 355px);
    padding: 508px 0 0;
    margin-left: auto;
    opacity: 0;
    left: 40px;
}
.cont_story.init .movie {
    opacity: 1;
	left: 0px;
	-webkit-transition: opacity 1s ease 0s,left 1s ease 0s;
	-moz-transition: opacity 1s ease 0s,left 1s ease 0s;
	-o-transition: opacity 1s ease 0s,left 1s ease 0s;
	-ms-transition: opacity 1s ease 0s,left 1s ease 0s;
	transition: opacity 1s ease 0s,left 1s ease 0s;
}
.cont_story .bg_movie01 {
    cursor: pointer;
}
.cont_story .bg_movie01 .mainVisual.js-movie-none {
	background: url(../images/page/story/img_header_movie.jpg) no-repeat 50% 50%;
	background-size: cover;
}
.cont_story .movie .btn_movie {
    position: absolute;
    bottom: 0;
    left: 0;
    margin: 0 0 60px 50px;
    z-index: 1;
}
.cont_story .movie .btn_movie .icn,
.cont_story .movie .btn_movie .icn img {
    width: 34px;
    height: 34px;
}
.cont_story .movie .btn_movie .icn {
    margin-right: 15px;
}
.cont_story .movie .btn_movie .playmovie {
    font-size: 10px;
}
.cont_story .cont {
    margin-top: -33px;
    padding: 0 0 63px;
}
.cont_story .cont p {
    color: #757575;
}
.cont_story .cont .readtxt {
    color: #757575;
    font-size: 18px;
    line-height: 160%;
    padding: 26px 0 15px;
}
@media screen and (max-width:1480px) {
    .cont_story .movie {
        width: 84.8%;
        padding: 46% 0 0;
    }
}
@media screen and (max-width:750px) {
    .cont_story .ttl {
        font-size: 10.9vw;
    }
    .cont_story .cont {
        margin-top: -5.5%;
        padding: 0 0 13%;
    }
    .cont_story .movie {
        width: 85.4%;
        padding: 108.9% 0 0;
    }
    .cont_story .bg_movie01 .mainVisual.js-movie-none {
		background: url(../images/page/story/img_header_movie_sp.jpg) no-repeat 50% 50%;
		background-size: cover;
    }
    .cont_story .movie .mainVisual .mainVisualInner {
        width: 230%!important;
        margin-left: -50%!important;
    }
    .cont_story .movie .btn_movie {
        margin: 0 0 25% 8%;
    }
    .cont_story .movie .btn_movie .playmovie {
        font-size: 2.8vw;
    }
    .cont_story .movie .btn_movie .icn {
        width: 13.4%;
        height: auto;
        margin-right: 4%;
    }
    .cont_story .movie .btn_movie .icn img {
        width: 100%;
        height: auto;
    }
    .cont_story .cont .readtxt {
        font-size: 3.75vw;
        padding: 6.5% 0 4%;
    }
}
/* cont_app
--------------------------------------------- */
.cont_app {
    background: #bdbdbd;
}
.cont_app .ttl {
    font-size: 52px;
    line-height: 100%;
}
.cont_app .main_image {
    position: relative;
    width: calc(50% + 355px);
    margin-left: auto;
    opacity: 0;
	left: 40px;
}
.cont_app.init .main_image {
    opacity: 1;
	left: 0px;
	-webkit-transition: opacity 1s ease 0s,left 1s ease 0s;
	-moz-transition: opacity 1s ease 0s,left 1s ease 0s;
	-o-transition: opacity 1s ease 0s,left 1s ease 0s;
	-ms-transition: opacity 1s ease 0s,left 1s ease 0s;
	transition: opacity 1s ease 0s,left 1s ease 0s;
}
.cont_app .main_image .image {
    position: relative;
    width: 100%;
    padding: 508px 0 0;
    overflow: hidden;
}
.cont_app .main_image .image img {
    position: absolute;
    top: 0;
    left: 0;
}
.cont_app .main_image .image .bnr {
    top: auto;
    bottom: 0;
    width: 300px;
    margin: 0 0 50px 20px;
    cursor: pointer;
}
.cont_app .cont {
    margin-top: -33px;
    padding: 0 0 84px;
}
.cont_app .cont .readtxt {
    color: #333;
    font-size: 18px;
    line-height: 160%;
    padding: 26px 0 15px;
}
.cont_app .cont .txt01 {
    color: #333;
}
.cont_app .cont .download {
    padding: 24px 0 0;
}
.cont_app .cont .download .btn_download {
    display: inline-block;
    width: 156px;
    position: relative;
	opacity: 0;
	left: 40px;
}
.cont_app.init .cont .download .btn_download {
    opacity: 1;
	left: 0px;
	-webkit-transition: opacity 1s ease 0.6s,left 1s ease 0.6s;
	-moz-transition: opacity 1s ease 0.6s,left 1s ease 0.6s;
	-o-transition: opacity 1s ease 0.6s,left 1s ease 0.6s;
	-ms-transition: opacity 1s ease 0.6s,left 1s ease 0.6s;
	transition: opacity 1s ease 0.6s,left 1s ease 0.6s;
}
.cont_app .cont .download .btn_download + .btn_download {
    margin-left: 10px;
}
.cont_app.init .cont .download .btn_download + .btn_download {
    opacity: 1;
	left: 0px;
	-webkit-transition: opacity 1s ease 0.8s,left 1s ease 0.8s;
	-moz-transition: opacity 1s ease 0.8s,left 1s ease 0.8s;
	-o-transition: opacity 1s ease 0.8s,left 1s ease 0.8s;
	-ms-transition: opacity 1s ease 0.8s,left 1s ease 0.8s;
	transition: opacity 1s ease 0.8s,left 1s ease 0.8s;
}
.cont_app .cont .download a img {
    transition: all .3s;
}
.cont_app .cont .download a:hover img {
    opacity: 0.7;
}
@media screen and (max-width:1480px) {
    .cont_app .main_image {
        width: 84.8%;
    }
    .cont_app .main_image .image {
        padding: 46% 0 0;
    }
}
@media screen and (max-width:750px) {
    .cont_app .ttl {
        font-size: 7.18vw;
    }
    .cont_app .main_image {
        width: 85.4%;
    }
    .cont_app .main_image .image {
        padding: 108.9% 0 0;
    }
    .cont_app .main_image .image .bnr {
        width: 58.6%;
        margin: 0 0 11% 3.7%;
    }
    .cont_app .cont {
        margin-top: -5.5%;
        padding: 0 0 20%;
    }
    .cont_app .cont .readtxt {
        font-size: 3.75vw;
        padding: 6.5% 0 4%;
    }
    .cont_app .cont .download {
        padding: 7% 0 0;
    }
    .cont_app .cont .download .btn_download {
        width: 45%;
    }
    .cont_app .cont .download .btn_download + .btn_download {
        margin-left: 1%;
    }
}
/* manual_wrap */
.sec .manual_wrap .image {
    position: relative;
	opacity: 0;
	left: 40px;
}
.sec .cont.init .manual_wrap .image {
    opacity: 1;
	left: 0px;
	-webkit-transition: opacity 1s ease 0s,left 1s ease 0s;
	-moz-transition: opacity 1s ease 0s,left 1s ease 0s;
	-o-transition: opacity 1s ease 0s,left 1s ease 0s;
	-ms-transition: opacity 1s ease 0s,left 1s ease 0s;
	transition: opacity 1s ease 0s,left 1s ease 0s;
}
.sec .manual_wrap .txt_wrap {
    position: relative;
	opacity: 0;
	left: 40px;
}
.sec .cont.init .manual_wrap .txt_wrap {
    opacity: 1;
	left: 0px;
	-webkit-transition: opacity 1s ease 0.2s,left 1s ease 0.2s;
	-moz-transition: opacity 1s ease 0.2s,left 1s ease 0.2s;
	-o-transition: opacity 1s ease 0.2s,left 1s ease 0.2s;
	-ms-transition: opacity 1s ease 0.2s,left 1s ease 0.2s;
	transition: opacity 1s ease 0.2s,left 1s ease 0.2s;
}
@media (min-width:751px) and (max-width:9999px) {
    .sec .manual_wrap {
        overflow: hidden;
        margin: 0 0 37px;
    }
    .sec .manual_wrap .image {
        float: left;
        width: 31.25%;
        text-align: center;
    }
    .sec .manual_wrap .txt_wrap {
        float: left;
        width: 68.75%;
    }
    .sec .manual_wrap .readtxt {
        padding: 0 0 14px;
    }
}
@media screen and (max-width:750px) {
    .sec .manual_wrap {
        margin: 0 0 7%;
    }
    .sec .manual_wrap .image {
        padding: 0 0 10%;
    }
    .sec .manual_wrap .readtxt {
        padding: 4% 0;
    }
}
/*==================================================
main --- story
==================================================*/
/* sec01~03
--------------------------------------------- */
/* sec01 */
.story .sec01 .inner {
    padding: 86px 0 92px;
}
.story .sec01 .story_slider {
    padding: 0 0 28px;
}
.story .sec01 .story_slider li {
    width: 48.6%;
}
.story .sec01 .story_slider li + li {
    margin-left: 2.8%;
}
.story .sec01 .story_slider li figcaption {
    font-size: 11px;
    position: relative;
	opacity: 0;
}
.story .sec01 .txt01 {
    position: relative;
	opacity: 0;
	left: 40px;
}
.story .sec01 .txt01.init {
    opacity: 1;
	left: 0px;
	-webkit-transition: opacity 1s ease 0s,left 1s ease 0s;
	-moz-transition: opacity 1s ease 0s,left 1s ease 0s;
	-o-transition: opacity 1s ease 0s,left 1s ease 0s;
	-ms-transition: opacity 1s ease 0s,left 1s ease 0s;
	transition: opacity 1s ease 0s,left 1s ease 0s;
}
.story .sec01 .image_wrap figure {
    position: relative;
	opacity: 0;
	left: 40px;
}
.story .sec01 .image_wrap.init figure {
    opacity: 1;
	left: 0px;
	-webkit-transition: opacity 1s ease 0s,left 1s ease 0s;
	-moz-transition: opacity 1s ease 0s,left 1s ease 0s;
	-o-transition: opacity 1s ease 0s,left 1s ease 0s;
	-ms-transition: opacity 1s ease 0s,left 1s ease 0s;
	transition: opacity 1s ease 0s,left 1s ease 0s;
}
.story .sec01 .image_wrap figcaption {
    position: relative;
	opacity: 0;
  display:inline-block;
  overflow:hidden;
  width:100%;
}
.story .sec01 .image_wrap figcaption .shuffleinner{
  display:inline-block;
  width:1000%;
}
.story .sec01 .ttl_wrap .txt .shuffle{
  display:inline-block;
  width:100%;
  overflow:hidden;
}
.story .sec01 .ttl_wrap .txt .shuffleinner{
  display:inline-block;
  width:1000%;
}
.story .sec01 .image_wrap p {
    position: relative;
	opacity: 0;
	left: 40px;
}
.story .sec01 .image_wrap.init p {
    opacity: 1;
	left: 0px;
	-webkit-transition: opacity 1s ease 0.4s,left 1s ease 0.4s;
	-moz-transition: opacity 1s ease 0.4s,left 1s ease 0.4s;
	-o-transition: opacity 1s ease 0.4s,left 1s ease 0.4s;
	-ms-transition: opacity 1s ease 0.4s,left 1s ease 0.4s;
	transition: opacity 1s ease 0.4s,left 1s ease 0.4s;
}
@media (min-width:751px) and (max-width:9999px) {
    .story .sec01 .txt01 {
        width: 70%;
    }
    .story .sec01 .image_wrap {
        overflow: hidden;
        padding: 60px 0 0;
    }
    .story .sec01 .image_wrap figcaption {
        float: left;
    }
    .story .sec01 .image_wrap p {
        float: right;
        width: 57%;
        padding: 10px 0 0;
    }
}
@media screen and (max-width:750px) {
    .story .sec01 .inner {
        padding: 10% 0 14%;
    }
    .story .sec01 .story_slider {
        overflow: visible;
    }
    .story .sec01 .story_slider li + li {
        margin-left: 0;
    }
    .story .sec01 .story_slider li figcaption {
        font-size: 2.5vw;
    }
    .story .sec01 .txt01 {
        width: 100%;
    }
    .story .sec01 .image_wrap {
        padding: 9% 0 0;
    }
    .story .sec01 .image_wrap p {
        padding: 7% 0 0;
    }
}
/* sec02 */
.story .sec02 .inner {
    padding: 150px 0 100px;
}
.story .sec02 .cont01 figure {
    position: relative;
	opacity: 0;
	left: 40px;
}
.story .sec02 .cont01 figure.init {
    opacity: 1;
	left: 0px;
	-webkit-transition: opacity 1s ease 0s,left 1s ease 0s;
	-moz-transition: opacity 1s ease 0s,left 1s ease 0s;
	-o-transition: opacity 1s ease 0s,left 1s ease 0s;
	-ms-transition: opacity 1s ease 0s,left 1s ease 0s;
	transition: opacity 1s ease 0s,left 1s ease 0s;
}
.story .sec02 .cont01 p {
    position: relative;
	opacity: 0;
	left: 40px;
}
.story .sec02 .cont01 p.init {
    opacity: 1;
	left: 0px;
	-webkit-transition: opacity 1s ease 0s,left 1s ease 0s;
	-moz-transition: opacity 1s ease 0s,left 1s ease 0s;
	-o-transition: opacity 1s ease 0s,left 1s ease 0s;
	-ms-transition: opacity 1s ease 0s,left 1s ease 0s;
	transition: opacity 1s ease 0s,left 1s ease 0s;
}
.story .sec02 .cont01 .readtxt {
    padding-top: 20px;
}
@media (min-width:751px) and (max-width:9999px) {
    .story .sec02 .txt01 {
        width: 70%;
    }
}
@media screen and (max-width:750px) {
    .story .sec02 .inner {
        padding: 10% 0 14%;
    }
    .story .sec02 .cont01 .readtxt {
        padding-top: 5%;
    }
}
/* sec02~03 */
.story .sec02 .readtxt,
.story .sec03 .readtxt {
    padding: 0 0 14px;
}
.story .sec02 .image_wrap figure,
.story .sec03 .image_wrap figure {
    position: relative;
	opacity: 0;
	left: 40px;
}
.story .sec02 .image_wrap.init figure,
.story .sec03 .image_wrap.init figure {
    opacity: 1;
	left: 0px;
	-webkit-transition: opacity 1s ease 0s,left 1s ease 0s;
	-moz-transition: opacity 1s ease 0s,left 1s ease 0s;
	-o-transition: opacity 1s ease 0s,left 1s ease 0s;
	-ms-transition: opacity 1s ease 0s,left 1s ease 0s;
	transition: opacity 1s ease 0s,left 1s ease 0s;
}
.story .sec02 .image_wrap .txt_wrap,
.story .sec03 .image_wrap .txt_wrap {
    position: relative;
	opacity: 0;
	left: 40px;
}
.story .sec02 .image_wrap.init .txt_wrap,
.story .sec03 .image_wrap.init .txt_wrap {
    opacity: 1;
	left: 0px;
	-webkit-transition: opacity 1s ease 0.2s,left 1s ease 0.2s;
	-moz-transition: opacity 1s ease 0.2s,left 1s ease 0.2s;
	-o-transition: opacity 1s ease 0.2s,left 1s ease 0.2s;
	-ms-transition: opacity 1s ease 0.2,left 1s ease 0.2s;
	transition: opacity 1s ease 0.2s,left 1s ease 0.2s;
}
.story .sec02 .image_wrap + .image_wrap,
.story .sec03 .image_wrap + .image_wrap {
    padding: 40px 0 0;
}
@media (min-width:751px) and (max-width:9999px) {
    .story .sec02 .image_wrap,
    .story .sec03 .image_wrap {
        display:-webkit-box;
        display:-ms-flexbox;
        display: flex;
        -webkit-box-pack:justify;
        -ms-flex-pack:justify;
        justify-content:space-between;
        -webkit-box-align: flex-end;
        -ms-flex-align: flex-end;
        align-items: flex-end;
    }
    .story .sec02 .image_wrap:nth-of-type(2n+1),
    .story .sec03 .image_wrap:nth-of-type(2n+1) {
        -ms-flex-flow: row-reverse;
        flex-flow: row-reverse;
    }
    .story .sec02 .image_wrap figure,
    .story .sec03 .image_wrap figure {
        width: 55.5%;
    }
    .story .sec02 .image_wrap .txt_wrap,
    .story .sec03 .image_wrap .txt_wrap {
        width: 40%;
    }
    .story .sec02 .image_wrap p,
    .story .sec03 .image_wrap p {
        font-size: 12px;
    }
    .story .sec02 .image_wrap .readtxt,
    .story .sec03 .image_wrap .readtxt {
        font-size: 14px;
        letter-spacing: 0.1em;
    }
}
@media screen and (max-width:750px) {
    .story .sec02 .readtxt,
    .story .sec03 .readtxt {
        padding: 4% 0;
    }
    .story .sec02 .image_wrap + .image_wrap,
    .story .sec03 .image_wrap + .image_wrap {
        padding: 8% 0 0;
    }
}
/* sec03 */
.story .sec03 .inner {
    padding: 130px 0 140px;
}
.story .sec03 .cont01 h3 {
    color: #fff;
    font-size: 14px;
    display: inline-block;
    width:100%;
    overflow:hidden;
    box-sizing:border-box;
}
.story .sec03 .cont01 h3 .shuffleinner{
  display: inline-block;
  width:1000%;
}
.story .sec03 .cont01 h3.sp {
    display: none;
}
@media screen and (max-width:750px) {
  .story .sec03 .cont01 h3.pc {
    display:none;
  }
  .story .sec03 .cont01 h3.sp {
    display: block;
    }
}
.story .sec03 .image_wrap .txt_name {
    font-size: 12px;
}
.story .sec03 .image_wrap .txt_position {
    font-size: 10px;
    line-height: 150%;
    padding: 4px 0 0;
}
.story .sec03 .manual_wrap .image figure {
    width: 60.8%;
    margin: 50px auto 0;
}
.story .sec03 .cont02 .image01 {
    position: relative;
	opacity: 0;
	left: 40px;
}
.story .sec03 .cont02 .image01.init {
    opacity: 1;
	left: 0px;
	-webkit-transition: opacity 1s ease 0s,left 1s ease 0s;
	-moz-transition: opacity 1s ease 0s,left 1s ease 0s;
	-o-transition: opacity 1s ease 0s,left 1s ease 0s;
	-ms-transition: opacity 1s ease 0s,left 1s ease 0s;
	transition: opacity 1s ease 0s,left 1s ease 0s;
}
.story .sec03 .cont02 .image_wrap {
    padding: 30px 0 40px;
}
.story .sec03 .image_wrap .btn {
    width: 226px;
    margin: 26px 0 0;
}
.story .sec03 .image_wrap .btn p {
    font-size: 10px;
}
.story .sec03 .movie_wrap {
    position: relative;
}
.story .sec03 .movie_wrap .movie {
    position: relative;
    padding: 56.3% 0 0;
    opacity: 0;
    left: 40px;
    cursor: pointer;
}
.story .sec03 .movie_wrap.init .movie {
    opacity: 1;
	left: 0px;
	-webkit-transition: opacity 1s ease 0s,left 1s ease 0s;
	-moz-transition: opacity 1s ease 0s,left 1s ease 0s;
	-o-transition: opacity 1s ease 0s,left 1s ease 0s;
	-ms-transition: opacity 1s ease 0s,left 1s ease 0s;
	transition: opacity 1s ease 0s,left 1s ease 0s;
}
.story .sec03 .movie_wrap .movie .bg_movie02 .mainVisual.js-movie-none {
	background: url(../images/page/story/img_sec03_movie.jpg) no-repeat 50% 50%;
	background-size: cover;
}
.story .sec03 .movie_wrap .btn_movie {
    position: absolute;
    font-size: 10px;
    opacity: 0;
}
.story .sec03 .movie_wrap p {
    padding: 15px 0 0;
    color: #757575;
    position: relative;
	opacity: 0;
  display:inline-block;
  width:100%;
  overflow:hidden;
  box-sizing:border-box;
}
.story .sec03 .movie_wrap p .shuffleinner {
  display:inline-block;
  width:1000%;
}
@media (min-width:751px) and (max-width:9999px) {
    .story .sec03 .movie_wrap .btn_movie {
        top: 50%;
        right: -40px;
        margin-right: 4%;
        -webkit-transform: translate(0,-50%);
        -ms-transform: translate(0,-50%);
        transform: translate(0,-50%);
    }
    .story .sec03 .movie_wrap.init .btn_movie {
        opacity: 1;
        right: 0px;
        -webkit-transition: opacity 1s ease 0.4s,right 1s ease 0.4s;
        -moz-transition: opacity 1s ease 0.4s,right 1s ease 0.4s;
        -o-transition: opacity 1s ease 0.4s,right 1s ease 0.4s;
        -ms-transition: opacity 1s ease 0.4s,right 1s ease 0.4s;
        transition: opacity 1s ease 0.4s,right 1s ease 0.4s;
    }
}
@media screen and (max-width:750px) {
    .story .sec03 .inner {
        padding: 10% 0 14%;
    }
    .story .sec03 .image_wrap .txt_name {
        font-size: 2.8vw;
    }
    .story .sec03 .image_wrap .txt_position {
        font-size: 2.5vw;
        padding: 0;
    }
    .story .sec03 .manual_wrap .image figure {
        width: 64%;
        height: auto;
        margin: 0 auto;
    }
    .story .sec03 .cont01 h3 {
        font-size: 2.8vw;
    }
    .story .sec03 .cont02 .image_wrap {
        position: relative;
        padding: 4% 0 26%;
    }
    .story .sec03 .image_wrap .txt_wrap {
        padding: 0 0 7%;
    }
    .story .sec03 .image_wrap .btn {
        position: absolute;
        width: 100%;
        top: 100%;
        margin: 100% 0 0;
    }
    .story .sec03 .image_wrap .btn p {
        font-size: 2.8vw;
        line-height: 140%;
    }
    .story .sec03 .movie_wrap {
        width: 113%;
        padding: 26% 0 0;
    }
    .story .sec03 .movie_wrap .movie .bg_movie02 .mainVisual.js-movie-none {
		background: url(../images/page/story/img_sec03_movie_sp.jpg) no-repeat 50% 50%;
		background-size: cover;
    }
    .story .sec03 .movie_wrap .btn_movie {
        left: 40px;
        bottom: 0;
        width: 100%;
        margin: 0 0 10% 5%;
    }
    .story .sec03 .movie_wrap.init .btn_movie {
        opacity: 1;
        left: 0;
        -webkit-transition: opacity 1s ease 0.4s,left 1s ease 0.4s;
        -moz-transition: opacity 1s ease 0.4s,left 1s ease 0.4s;
        -o-transition: opacity 1s ease 0.4s,left 1s ease 0.4s;
        -ms-transition: opacity 1s ease 0.4s,left 1s ease 0.4s;
        transition: opacity 1s ease 0.4s,left 1s ease 0.4s;
    }
    .story .sec03 .movie_wrap .btn_movie .icn {
        width: 11%;
    }
    .story .sec03 .movie_wrap p {
        padding: 2% 0 5%;
    }
}
/*==================================================
main --- app
==================================================*/
.app .main {
    color: #333;
    background: #d6d6d6;
}
.app .main .ttl {
    color: #fff;
}
.app .sec:nth-of-type(2n) {
    background: #cdcdcd;
}
/* sec01~03
--------------------------------------------- */
/* sec01 */
.app .sec01 .inner {
    padding: 86px 0 92px;
}
.app .sec01 .watch {
    width: 73.6%;
    margin: 0 auto;
    position: relative;
	opacity: 0;
	left: 40px;
}
.app .sec01 .watch.init {
    opacity: 1;
	left: 0px;
	-webkit-transition: opacity 1s ease 0s,left 1s ease 0s;
	-moz-transition: opacity 1s ease 0s,left 1s ease 0s;
	-o-transition: opacity 1s ease 0s,left 1s ease 0s;
	-ms-transition: opacity 1s ease 0s,left 1s ease 0s;
	transition: opacity 1s ease 0s,left 1s ease 0s;
}
.app .sec01 .manual_wrap .image figure {
    width: 68%;
}
.app .sec01 .experience_slider .txt_caption {
    color: #9e9d9d;
    padding: 24px 0 0;
    position: relative;
	opacity: 0;
  box-sizing:border-box;
  display:inline-block;
  overflow:hidden;
  width:100%;
}
.app .sec01 .experience_slider .txt_caption .shuffleinner{
  display:inline-block;
  width:1000%;
}
.app .sec01 .experience_slider.init .txt_caption {
    opacity: 1;
}
.app .sec01 .experience_slider .txt {
    padding: 24px 0 0;
    position: relative;
	opacity: 0;
	left: 40px;
}
.app .sec01 .experience_slider.init .txt {
    opacity: 1;
	left: 0px;
	-webkit-transition: opacity 1s ease 0.4s,left 1s ease 0.4s;
	-moz-transition: opacity 1s ease 0.4s,left 1s ease 0.4s;
	-o-transition: opacity 1s ease 0.4s,left 1s ease 0.4s;
	-ms-transition: opacity 1s ease 0.4s,left 1s ease 0.4s;
	transition: opacity 1s ease 0.4s,left 1s ease 0.4s;
}
@media (min-width:751px) and (max-width:9999px) {
    .app .sec01 .experience_slider .txt_caption {
        float: left;
    }
    .app .sec01 .experience_slider .txt {
        float: right;
        width: 57%;
    }
}
@media screen and (max-width:750px) {
    .app .sec01 .inner {
        padding: 10% 0 14%;
    }
    .app .sec01 .watch {
        width: 100%;
        margin-top: -5%;
    }
    .app .sec01 .manual_wrap {
        position: relative;
    }
    .app .sec01 .manual_wrap .image {
        padding: 0 0 2%;
    }
    .app .sec01 .manual_wrap .image figure {
        width: 40%;
        margin-left: -5%;
    }
    .app .sec01 .manual_wrap .readtxt {
        position: absolute;
        bottom: 100%;
        left: 0;
        margin-left: 37%;
        margin-bottom: 14%;
    }
    .app .sec01 .experience_slider {
        overflow: visible;
    }
    .app .sec01 .experience_slider .txt_caption {
        font-size: 2.5vw;
        padding: 3% 0 0;
    }
    .app .sec01 .experience_slider .txt {
        padding: 6% 0 0;
    }
}
/* sec02 */
.app .sec02 .inner {
    padding: 77px 0 55px;
}
.app .sec02 .image_wrap h3 {
    color: #fff;
    border: none;
    margin: 0;
}
.app .sec02 .image_wrap.init h3 {
    opacity: 1;
}
.app .sec02 .image_wrap h3 + p {
    position: relative;
	opacity: 0;
	left: 40px;
}
.app .sec02 .image_wrap.init h3 + p {
    opacity: 1;
	left: 0px;
	-webkit-transition: opacity 1s ease 0.2s,left 1s ease 0.2s;
	-moz-transition: opacity 1s ease 0.2s,left 1s ease 0.2s;
	-o-transition: opacity 1s ease 0.2s,left 1s ease 0.2s;
	-ms-transition: opacity 1s ease 0.2s,left 1s ease 0.2s;
	transition: opacity 1s ease 0.2s,left 1s ease 0.2s;
}
@media screen and (max-width:750px) {
    .app .sec02 .inner {
        padding: 10% 0 14%;
    }
}
/* sec02~03 */
.app .sec02 .image_wrap .readtxt,
.app .sec03 .image_wrap .readtxt {
    font-size: 14px;
    letter-spacing: 0.1em;
    position: relative;
	opacity: 0;
}
.app .sec02 .image_wrap.init .readtxt,
.app .sec03 .image_wrap.init .readtxt {
    opacity: 1;
}
.app .sec02 .image_wrap .readtxt + p,
.app .sec03 .image_wrap .readtxt + p {
    position: relative;
	opacity: 0;
	left: 40px;
}
.app .sec02 .image_wrap.init .readtxt + p,
.app .sec03 .image_wrap.init .readtxt + p {
    opacity: 1;
	left: 0px;
	-webkit-transition: opacity 1s ease 0.2s,left 1s ease 0.2s;
	-moz-transition: opacity 1s ease 0.2s,left 1s ease 0.2s;
	-o-transition: opacity 1s ease 0.2s,left 1s ease 0.2s;
	-ms-transition: opacity 1s ease 0.2s,left 1s ease 0.2s;
	transition: opacity 1s ease 0.2s,left 1s ease 0.2s;
}
.app .sec02 .image_wrap h3,
.app .sec03 .image_wrap .readtxt {
    padding: 0 0 23px;
}
.app .sec02 .image_wrap h3 .en,
.app .sec03 .image_wrap .readtxt .en {
    display: block;
    font-size: 26px;
    font-weight: 400;
    line-height: 130%;
}
.app .sec02 .image_wrap h3 .jp,
.app .sec03 .image_wrap .readtxt .jp {
    display: block;
    font-size: 14px;
    font-weight: 700;
    line-height: 130%;
    padding: 5px 0 0;
}
.app .sec02 .image_wrap figure,
.app .sec03 .image_wrap figure {
    position: relative;
	opacity: 0;
	left: 40px;
}
.app .sec02 .image_wrap.init figure,
.app .sec03 .image_wrap.init figure,
.app .sec03 .create_wrap.init figure {
    opacity: 1;
	left: 0px;
	-webkit-transition: opacity 1s ease 0.4s,left 1s ease 0.4s;
	-moz-transition: opacity 1s ease 0.4s,left 1s ease 0.4s;
	-o-transition: opacity 1s ease 0.4s,left 1s ease 0.4s;
	-ms-transition: opacity 1s ease 0.4s,left 1s ease 0.4s;
	transition: opacity 1s ease 0.4s,left 1s ease 0.4s;
}
@media (min-width:751px) and (max-width:9999px) {
    .app .sec02 .image_wrap,
    .app .sec03 .image_wrap {
        display:-webkit-box;
        display:-ms-flexbox;
        display: flex;
        -webkit-box-pack:justify;
        -ms-flex-pack:justify;
        justify-content:space-between;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }
    .app .sec02 .image_wrap + .image_wrap {
        margin-top: -4%;
    }
    .app .sec02 .image_wrap:nth-of-type(2n+1),
    .app .sec03 .image_wrap:nth-of-type(2n) {
        -ms-flex-flow: row-reverse;
        flex-flow: row-reverse;
    }
    .app .sec02 .image_wrap figure,
    .app .sec03 .image_wrap figure {
        width: 40.2%;
    }
    .app .sec02 .image_wrap .txt_wrap,
    .app .sec03 .image_wrap .txt_wrap {
        width: 42%;
        margin-bottom: 11%;
    }
}
@media screen and (max-width:750px) {
    .app .sec02 .image_wrap figure,
    .app .sec03 .image_wrap figure {
        width: 59%;
        margin: 10% auto;
    }
    .app .sec02 .image_wrap h3,
    .app .sec03 .image_wrap .readtxt {
        padding: 0 0 5%;
    }
    .app .sec02 .image_wrap h3 .en,
    .app .sec03 .image_wrap .readtxt .en {
        font-size: 4.68vw;
    }
    .app .sec02 .image_wrap h3 .jp,
    .app .sec03 .image_wrap .readtxt .jp {
        font-size: 2.87vw;
        padding: 1.5% 0 0;
    }
}
/* sec03 */
.app .sec03 .inner {
    padding: 80px 0 90px;
}
.app .sec03 .image_wrap .txt_wrap .readtxt .jp,
.app .sec03 .image_wrap .txt_wrap .readtxt .en{
  display:inline-block;
  width:100%;
  overflow:hidden;
}
.app .sec03 .image_wrap .txt_wrap .readtxt .shuffleinner{
  display:inline-block;
  width:1000%;
}
.app .sec03 .manual_wrap .image figure {
    width: 60.8%;
    margin: 0 auto;
}
.app .sec03 .manual_wrap .image p {
    font-size: 30px;
    letter-spacing: 0.15em;
    padding: 20px 0 0;
}
.app .sec03 .note_wrap {
    padding: 17px 0 0;
    position: relative;
	opacity: 0;
	left: 40px;
}
.app .sec03 .cont.init .note_wrap {
    opacity: 1;
	left: 0px;
	-webkit-transition: opacity 1s ease 0.4s,left 1s ease 0.4s;
	-moz-transition: opacity 1s ease 0.4s,left 1s ease 0.4s;
	-o-transition: opacity 1s ease 0.4s,left 1s ease 0.4s;
	-ms-transition: opacity 1s ease 0.4s,left 1s ease 0.4s;
	transition: opacity 1s ease 0.4s,left 1s ease 0.4s;
}
.app .sec03 .note_wrap p {
    font-size: 10px;
}
.app .sec03 .note_wrap .txt_note {
    font-weight: 700;
    padding: 0 0 5px;
}
.app .sec03 .btn {
    width: 220px;
    margin: 24px 0 0;
    position: relative;
	opacity: 0;
	left: 40px;
}
.app .sec03 .cont.init .btn {
    opacity: 1;
	left: 0px;
	-webkit-transition: opacity 1s ease 0.4s,left 1s ease 0.4s;
	-moz-transition: opacity 1s ease 0.4s,left 1s ease 0.4s;
	-o-transition: opacity 1s ease 0.4s,left 1s ease 0.4s;
	-ms-transition: opacity 1s ease 0.4s,left 1s ease 0.4s;
	transition: opacity 1s ease 0.4s,left 1s ease 0.4s;
}
.app .sec03 .download {
    position: relative;
    margin-top: -36px;
}
.app .sec03 .download p {
    position: absolute;
    top: 0;
    left: 40px;
    padding: 3.5% 0 0 21%;
    color: #333;
    font-size: 14px;
    font-weight: 700;
    opacity: 0;
}
.app .sec03 .cont03 .download.init p {
    opacity: 1;
	left: 0px;
	-webkit-transition: opacity 1s ease 0s,left 1s ease 0s;
	-moz-transition: opacity 1s ease 0s,left 1s ease 0s;
	-o-transition: opacity 1s ease 0s,left 1s ease 0s;
	-ms-transition: opacity 1s ease 0s,left 1s ease 0s;
	transition: opacity 1s ease 0s,left 1s ease 0s;
}
.app .sec03 .cont03 .readtxt .jp,
.app .sec03 .cont03 .readtxt .en{
  display:inline-block;
  width:100%;
  overflow:hidden;
}
.app .sec03 .cont03 .readtxt .shuffleinner{
  display:inline-block;
  width:1000%;
}
.app .sec03 .cont03 .txt01{
  opacity:0;
  position:relative;
  left:40px;
}
.app .sec03 .cont03.init .txt01{
    opacity: 1;
	left: 0px;
	-webkit-transition: opacity 1s ease 0s,left 1s ease 0s;
	-moz-transition: opacity 1s ease 0s,left 1s ease 0s;
	-o-transition: opacity 1s ease 0s,left 1s ease 0s;
	-ms-transition: opacity 1s ease 0s,left 1s ease 0s;
	transition: opacity 1s ease 0s,left 1s ease 0s;
}
.app .sec03 .download a {
    transition: all .3s;
}
.app .sec03 .download a:hover {
    opacity: 0.7;
}
.app .sec03 .download .btn_icon {
    display: inline-block;
    width: 21.3%;
    margin: 0 8px 0 -18px;
    position: relative;
	opacity: 0;
	left: 40px;
}
.app .sec03 .download.init .btn_icon {
    opacity: 1;
	left: 0px;
	-webkit-transition: opacity 1s ease 0s,left 1s ease 0s;
	-moz-transition: opacity 1s ease 0s,left 1s ease 0s;
	-o-transition: opacity 1s ease 0s,left 1s ease 0s;
	-ms-transition: opacity 1s ease 0s,left 1s ease 0s;
	transition: opacity 1s ease 0s,left 1s ease 0s;
}
.app .sec03 .download .btn_download {
    display: inline-block;
    width: 21.6%;
    vertical-align: bottom;
    margin: 0 0 5%;
    position: relative;
	opacity: 0;
	left: 40px;
}
.app .sec03 .download.init .btn_download {
    opacity: 1;
	left: 0px;
	-webkit-transition: opacity 1s ease 0.2s,left 1s ease 0.2s;
	-moz-transition: opacity 1s ease 0.2s,left 1s ease 0.2s;
	-o-transition: opacity 1s ease 0.2s,left 1s ease 0.2s;
	-ms-transition: opacity 1s ease 0.2s,left 1s ease 0.2s;
	transition: opacity 1s ease 0.2s,left 1s ease 0.2s;
}
.app .sec03 .download.init .btn_download + .btn_download {
    opacity: 1;
	left: 0px;
	-webkit-transition: opacity 1s ease 0.4s,left 1s ease 0.4s;
	-moz-transition: opacity 1s ease 0.4s,left 1s ease 0.4s;
	-o-transition: opacity 1s ease 0.4s,left 1s ease 0.4s;
	-ms-transition: opacity 1s ease 0.4s,left 1s ease 0.4s;
	transition: opacity 1s ease 0.4s,left 1s ease 0.4s;
}
.app .sec03 .download img {
    transition: all .3s;
}
.app .sec03 .download a:hover img {
    opacity: 0.7;
}
@media (min-width:751px) and (max-width:9999px) {
    .app .sec03 .cont02 h3 .en {
        font-size: 17px;
    }
    .app .sec03 .cont03 .image_wrap {
        padding-top: 13px;
    }
}
@media (min-width:751px) and (max-width:1300px) {
    .app .sec03 .cont02 h3 .en,
    .app .sec03 .cont02 h3 .jp {
        display: block;
        padding: 0;
    }
}
@media screen and (max-width:1300px) {
    .app .sec03 .download {
        margin-top: 0;
    }
}
@media screen and (max-width:750px) {
    .app .sec03 .inner {
        padding: 10% 0 14%;
    }
    .app .sec03 .manual_wrap .image figure {
        width: 44.6%;
    }
    .app .sec03 .manual_wrap .image p {
        display: inline-block;
        font-size: 7.3vw;
        padding: 0 0 0 10%;
    }
    .app .sec03 .note_wrap p {
        font-size: 2.8vw;
    }
    .app .sec03 .note_wrap .txt_note {
        padding: 0 0 3%;
    }
    .app .sec03 .btn {
        width: 100%;
        margin: 6% 0 0;
    }
    .app .sec03 .download {
        margin-top: 13%;
    }
    .app .sec03 .download p {
        font-size: 3.4vw;
        padding: 12% 0 0 38%;
    }
    .app .sec03 .download .btn_icon {
        display: block;
        width: 40%;
        margin: 0 0 0 -4%;
    }
    .app .sec03 .download .btn_download {
        width: 45.3%;
    }
    .app .sec03 .image_wrap {
        position: relative;
        padding: 0 0 6%;
    }
    .app .sec03 .image_wrap .btn {
        position: absolute;
        bottom: 0;
        margin: 0;
    }
}
/* get_slider --- pc */
.app .sec03 .slider::after {
	content: "";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
.app .sec03 .slider.pc {
    padding: 58px 0 0;
}
.app .sec03 .slider .slider_wrap {
    position: relative;
    float: left;
    width: 47.5%;
    margin: 30px 0 0 12%;
    opacity: 0;
	left: 40px;
}
.app .sec03 .slider .slider_wrap.init {
    opacity: 1;
	left: 0px;
	-webkit-transition: opacity 1s ease 0s,left 1s ease 0s;
	-moz-transition: opacity 1s ease 0s,left 1s ease 0s;
	-o-transition: opacity 1s ease 0s,left 1s ease 0s;
	-ms-transition: opacity 1s ease 0s,left 1s ease 0s;
	transition: opacity 1s ease 0s,left 1s ease 0s;
}
.app .sec03 .slider .slider_wrap .get_slider {
    position: absolute;
    top: 0;
    left: 0;
    margin: 12px 0 0 13px;
    width: 213px;
    overflow: visible;
}
.app .sec03 .slider .slider_wrap .get_slider li {
    opacity: 0!important;
}
.app .sec03 .slider .slider_wrap .get_slider li.swiper-slide-active {
    opacity: 1!important;
}
.app .sec03 .slider .slider_wrap .get_slider li.slide-item01,
.app .sec03 .slider .slider_wrap .get_slider li.slide-item02 {
    position: relative;
}
.app .sec03 .slider .slider_wrap .get_slider li.slide-item01::after,
.app .sec03 .slider .slider_wrap .get_slider li.slide-item02::after {
    position: absolute;
    content: "";
    background: url(../images/page/app/icn_focus.png) no-repeat 50% 50%;
    background-size: contain;
    top: 0;
    left: 0;
    width: 108px;
    height: 108px;
}
.app .sec03 .slider .slider_wrap .get_slider li.slide-item01::after {
    margin: 4px 0 0 -19px;
}
.app .sec03 .slider .slider_wrap .get_slider li.slide-item02::after {
    margin: 142px 0 0 -23px;
}
.app .sec03 .slider .slider_wrap .device {
    width: 289px;
}
.app .sec03 .slider .slider_wrap .figure_caption li {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    transition: all .3s;
    opacity: 0;
    width: 173px;
}
.app .sec03 .slider .slider_wrap .figure_caption li:nth-child(1) {
    margin: 62px 0 0 -120px;
}
.app .sec03 .slider .slider_wrap .figure_caption li:nth-child(2) {
    margin: 200px 0 0 -120px;
}
.app .sec03 .slider .slider_wrap .figure_caption li:nth-child(3) {
    margin: 140px 0 0 -120px;
}
.app .sec03 .slider .slider_wrap .figure_caption li:nth-child(4) {
    margin: 100px 0 0 -120px;
}
.app .sec03 .slider .slider_wrap .figure_caption li.current {
    opacity: 1;
}
.app .sec03 .slider .slider_caption {
    float: right;
    width: 38.5%;
}
.app .sec03 .slider .slider_caption li {
    position: relative;
    padding-left: 7.5%;
    cursor: pointer;
    opacity: 0;
	left: 40px;
}
.app .sec03 .slider .slider_caption li::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: #4a50d1;
    background: -webkit-linear-gradient(top,  #4a50d1 0%,#7db9e8 100%);
    background: linear-gradient(to bottom,  #4a50d1 0%,#7db9e8 100%);
    opacity: 0;
}
.app .sec03 .slider .slider_caption li.current::before {
    opacity: 1;
}
.app .sec03 .slider .slider_caption li + li {
    margin: 24px 0 0;
}
.app .sec03 .slider .slider_caption.init li:nth-child(1) {
    opacity: 1;
	left: 0px;
	-webkit-transition: opacity 1s ease 0.2s,left 1s ease 0.2s;
	-moz-transition: opacity 1s ease 0.2s,left 1s ease 0.2s;
	-o-transition: opacity 1s ease 0.2s,left 1s ease 0.2s;
	-ms-transition: opacity 1s ease 0.2s,left 1s ease 0.2s;
	transition: opacity 1s ease 0.2s,left 1s ease 0.2s;
}
.app .sec03 .slider .slider_caption.init li:nth-child(2) {
    opacity: 1;
	left: 0px;
	-webkit-transition: opacity 1s ease 0.4s,left 1s ease 0.4s;
	-moz-transition: opacity 1s ease 0.4s,left 1s ease 0.4s;
	-o-transition: opacity 1s ease 0.4s,left 1s ease 0.4s;
	-ms-transition: opacity 1s ease 0.4s,left 1s ease 0.4s;
	transition: opacity 1s ease 0.4s,left 1s ease 0.4s;
}
.app .sec03 .slider .slider_caption.init li:nth-child(3) {
    opacity: 1;
	left: 0px;
	-webkit-transition: opacity 1s ease 0.6s,left 1s ease 0.6s;
	-moz-transition: opacity 1s ease 0.6s,left 1s ease 0.6s;
	-o-transition: opacity 1s ease 0.6s,left 1s ease 0.6s;
	-ms-transition: opacity 1s ease 0.6s,left 1s ease 0.6s;
	transition: opacity 1s ease 0.6s,left 1s ease 0.6s;
}
.app .sec03 .slider .slider_caption.init li:nth-child(4) {
    opacity: 1;
	left: 0px;
	-webkit-transition: opacity 1s ease 0.8s,left 1s ease 0.8s;
	-moz-transition: opacity 1s ease 0.8s,left 1s ease 0.8s;
	-o-transition: opacity 1s ease 0.8s,left 1s ease 0.8s;
	-ms-transition: opacity 1s ease 0.8s,left 1s ease 0.8s;
	transition: opacity 1s ease 0.8s,left 1s ease 0.8s;
}
.app .sec03 .slider_caption h4 {
    color: #fff;
    font-size: 16px;
    padding: 0 0 4px;
}
.app .sec03 .slider .slider_caption p {
    font-size: 12px;
}
/* get_slider --- sp */
.app .sec03 .slider_sp .get_slider_sp {
    overflow: visible;
}
.app .sec03 .slider_sp figure {
    position: relative;
    text-align: center;
    padding-top: 16%;
}
.app .sec03 .slider_sp figure > img {
    width: 78.9%;
}
.app .sec03 .slider_sp figcaption {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0;
    width: 57%;
}
.app .sec03 .slider_sp .slide-item01 figcaption {
    margin: 38% 0 0 -25%;
}
.app .sec03 .slider_sp .slide-item02 figcaption {
    margin: 75% 0 0 -25%;
}
.app .sec03 .slider_sp .slide-item03 figcaption {
    margin: 61% 0 0 -25%;
}
.app .sec03 .slider_sp .slide-item04 figcaption {
    margin: 47% 0 0 -25%;
}
.app .sec03 .slider_sp .slider_caption {
    width: 96%;
    margin: -10% 0 7%;
}
.app .sec03 .slider_sp h4 {
    color: #fff;
    font-size: 3.75vw;
    padding: 0 0 5%;
}
/* create_slider */
.app .sec03 .create_wrap {
    position: relative;
    float: right;
    width: 47.5%;
    margin: 30px 0 0 18%;
    padding-right: 3%;
    opacity: 0;
    left: 40px;
}
.app .sec03 .create_wrap.init {
    opacity: 1;
	left: 0px;
	-webkit-transition: opacity 1s ease 0s,left 1s ease 0s;
	-moz-transition: opacity 1s ease 0s,left 1s ease 0s;
	-o-transition: opacity 1s ease 0s,left 1s ease 0s;
	-ms-transition: opacity 1s ease 0s,left 1s ease 0s;
	transition: opacity 1s ease 0s,left 1s ease 0s;
}
.app .sec03 .create_wrap figure {
    width: 100%;
    transition: none!important;
}
.app .sec03 .create_wrap .create_slider {
    position: absolute;
    top: 0;
    left: 0;
    margin: 12px 0 0 13px;
    width: 213px;
}
.app .sec03 .create_wrap .create_slider li {
    opacity: 0!important;
}
.app .sec03 .create_wrap .create_slider li.swiper-slide-active {
    opacity: 1!important;
}
.app .sec03 .create_wrap .swiper-pagination {
    top: 50%;
    right: 0;
    width: 20px;
    margin-top: -50px;
}
.app .sec03 .create_wrap .swiper-pagination .swiper-pagination-bullet {
    display: block;
    border-radius: unset;
    background: #8e8e8e;
    width: 100%;
    height: 2px;
    opacity: 1;
}
.app .sec03 .create_wrap .swiper-pagination .swiper-pagination-bullet-active {
    background: #2631ff;
}
.app .sec03 .create_wrap .swiper-pagination .swiper-pagination-bullet + .swiper-pagination-bullet {
    margin-top: 12px;
}
.app .sec03 .create_wrap .device {
    width: 289px;
}
@media screen and (max-width:750px) {
    .app .sec03 .create_wrap {
        float: none;
        width: 100%;
        margin: 0 auto;
        padding: 0;
    }
    .app .sec03 .create_wrap .create_slider {
        width: 44%;
        margin: -2% 0 0 22.8%;
    }
    .app .sec03 .create_wrap .swiper-pagination {
        width: 4.5%;
        margin: -13% 10% 0 0;
    }
    .app .sec03 .create_wrap .device {
        width: 60%;
    }
    .app .sec03 .slider_sp {
        display: block;
    }
}
@media screen and (max-width:480px) {
    .app .sec03 .create_wrap .swiper-pagination .swiper-pagination-bullet {
        height: 1px;
    }
    .app .sec03 .create_wrap .swiper-pagination .swiper-pagination-bullet + .swiper-pagination-bullet {
        margin-top: 65%;
    }
}
/* #cont_movie
--------------------------------------------- */
.app #cont_movie {
    margin-bottom: 10px;
}
@media (min-width:1101px) {
    .app #cont_movie .movie_wrap .movie {
        padding: 32.7% 0 0;
    }
}
@media (min-width:1101px) and (max-width:1400px) {
    .app #cont_movie .movie_wrap .txt_wrap h2 br {
        display: block;
    }
}
@media screen and (max-width:750px) {
    .app #cont_movie {
        margin-bottom: 1.56%;
    }
}
/*==================================================
main --- information
==================================================*/
/* page_header
--------------------------------------------- */
.information .page_header {
    padding: 80px 0;
}
.information .page_header .ttl {
    font-size: 52px;
    padding-bottom: 30px;
}
.information .page_header .ttl {
  opacity: 0;
  display:inline-block;
  overflow:hidden;
}
.information .page_header .ttl .shuffle{
  display:inline-block;
  width:100%;
  overflow:hidden;
}
.information .page_header .ttl .shuffleinner{
  display:inline-block;
  width:1000%;
}
.information .page_header.init .ttl {
    opacity: 1;
}
.information .page_header ul {
    display:-webkit-box;
  	display:-ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    position: relative;
	opacity: 0;
	left: 40px;
}
.information .page_header.init ul {
    opacity: 1;
	left: 0px;
	-webkit-transition: opacity 1s ease 0s,left 1s ease 0s;
	-moz-transition: opacity 1s ease 0s,left 1s ease 0s;
	-o-transition: opacity 1s ease 0s,left 1s ease 0s;
	-ms-transition: opacity 1s ease 0s,left 1s ease 0s;
	transition: opacity 1s ease 0s,left 1s ease 0s;
}
.information .page_header li {
    padding-right: 22px;
}
.information .page_header li a {
    color: #757575;
    font-size: 12px;
}
@media screen and (max-width:750px) {
    .information .page_header {
        padding: 25.7% 0 14.6%;
    }
    .information .page_header .ttl {
        font-size: 7.8vw;
    }
    .information .page_header li {
        padding-right: 6%;
    }
    .information .page_header li a {
        font-size: 3.123vw;
    }
}
/* sec
--------------------------------------------- */
.information .sec {
    padding-bottom: 50px;
    background: #1e1e1e;
}
.information .sec:last-of-type {
    padding-bottom: 100px;
}
.information .sec h2 {
    font-size: 16px;
    padding-bottom: 20px;
    position: relative;
	opacity: 0;
	left: 40px;
}
.information .info_list li {
	background: #181818;
	margin-bottom: 5px;
    position: relative;
	opacity: 0;
	left: 40px;
}
.information .sec h2.init,
.information .info_list li.init {
    opacity: 1;
	left: 0px;
	-webkit-transition: opacity 1s ease 0s,left 1s ease 0s;
	-moz-transition: opacity 1s ease 0s,left 1s ease 0s;
	-o-transition: opacity 1s ease 0s,left 1s ease 0s;
	-ms-transition: opacity 1s ease 0s,left 1s ease 0s;
	transition: opacity 1s ease 0s,left 1s ease 0s;
}
.information .info_list li:last-child {
	margin-bottom: 0;
}
.information .info_list li > a {
	display: block;
}
.information .info_list li .txt_wrap {
	padding: 25px 30px;
}
.information .info_list li .txt_wrap a {
	word-break: break-word;
}
.information .info_list .date {
	color: #434343;
	font-size: 11px;
	line-height: 100%;
	letter-spacing: 0.15em;
	overflow: hidden;
	margin: 6px 20px 0 0;
}
@media (min-width:750px) {
	.information .info_list li .txt_wrap {
		display:-webkit-box;
  		display:-ms-flexbox;
		display: flex;
	}
	.information .info_list li .txt {
		-webkit-flex: 1;
  		flex: 1;
	}
}
@media screen and (max-width:750px) {
    .information .sec {
        padding-bottom: 11.5%;
    }
    .information .sec:last-of-type {
        padding-bottom: 15.6%;
    }
    .information .sec h2 {
        font-size: 3.4vw;
        padding-bottom: 5.1%;
    }
	.information .info_list li {
		margin-bottom: 2%;
	}
	.information .info_list li .txt_wrap {
		padding: 5.7% 5%;
	}
	.information .info_list .date {
		font-size: 2.5vw;
		margin: 0 0 1%;
	}
}